import React, { useState, useEffect, useCallback } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import { Dashboard } from "@/services/dashboard";
import { DashboardComponent } from "@/pages/dashboards/DashboardPage";
import { CloseCircleTwoTone } from '@ant-design/icons';

import "./dialog.less";

function ExpandedDashboardDialog({ dialog, widget, dashboardId, popClickCheck, isPublic, refresh=false }) {
  const [dashboard, setDashboard] = useState(null);
  const pop_title = widget.getWidgetOptions(popClickCheck===0 ? "pop_title" : (popClickCheck===1 ? "click_title" : "check_title"));
  const pop_width = widget.getWidgetOptions(popClickCheck===0 ? "pop_width" : (popClickCheck===1 ? "click_width" : "check_width"));
  const pop_left = widget.getWidgetOptions(popClickCheck===0 ? "pop_left" : (popClickCheck===1 ? "click_left" : "check_left"));
  const pop_top = widget.getWidgetOptions(popClickCheck===0 ? "pop_top" : (popClickCheck===1 ? "click_top" : "check_top"));
  const show_header = widget.getWidgetOptions(popClickCheck===0 ? "pop_show_header" : (popClickCheck===1 ? "click_show_header" : "check_show_header"));
  const hide_parameters = widget.getWidgetOptions(popClickCheck===0 ? "pop_hide_parameters" : (popClickCheck===1 ? "click_hide_parameters" : "check_hide_parameters"));

  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  const cssstyle = showPortal ? {
    marginLeft: pop_left || null, 
    top: pop_top || null,
    "--style-back": localStorage.getItem('colorstyle_dialogback'),
  } : {
    marginLeft: pop_left || null, 
    top: pop_top || null,
    "--style-back": "#666666",
  }
  
  const handleClose = useCallback(() => {
    if (!!refresh) dialog.close();
  }, [dialog, refresh]);

  useEffect(() => {
    Dashboard.get({ id: dashboardId })
      .then(dashboardData => {
        setDashboard(dashboardData);
      })
      .catch();
  }, [dashboardId]);

  return (
    <Modal
      {...dialog.props}
      mask={false}
      maskClosable = {!refresh}
      title={(<label style={showPortal ? {color: localStorage.getItem('colorstyle_titlecolor')} : null}>{pop_title || ''}</label>)}
      width={!!pop_width ? pop_width : "90%"}
      footer={null}       // {<Button onClick={dialog.dismiss}>关闭</Button>}
      closeIcon={<CloseCircleTwoTone style={{fontSize:25}}/>}
      afterClose = {handleClose}
      wrapClassName={'dialog'}
      style={cssstyle}
      bodyStyle={showPortal ? {background: "#00000000"} : null}
    >
      <div className="dashboard-page">
        {dashboard && <DashboardComponent dashboard={dashboard} isPop={true} title={pop_title} isPublic={isPublic} hide_header={!show_header} hide_parameters={hide_parameters} />}
      </div>
    </Modal>
  );
}

ExpandedDashboardDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

export default wrapDialog(ExpandedDashboardDialog);
